<template>
    <div id="home">
        <!-- home页面：显示的组件+底部导航 -->
        <keep-alive>
            <router-view/>
        </keep-alive>
        
        <!-- 页面底部导航 -->
        <div class="home-bottom">
            <div class="container">
                <router-link active-class="active" to='/home/book-shelf'>
                    <i class="iconfont icon-shelf"></i>
                    书架
                </router-link>
                <router-link active-class="active" to='/home/book-store'>
                    <i class="iconfont icon-shop"></i>
                    书城
                </router-link>
                <router-link active-class="active" to='/home/book-class'>
                    <i class="iconfont icon-fenlei"></i>
                    分类
                </router-link>
                <router-link active-class="active" to='/home/user'>
                    <i class="iconfont icon-wode"></i>
                    我的
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Home',
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
.home-bottom {
    height: 60px;
    background-color: white;
    font-size: 14px;
    .container {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 60px;
        box-shadow: -1px 0px 10px #ccc;
        background-color: white;
        display: flex;
        a {
            display: block;
            flex-grow: 1;
            height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            i {
                font-size: 26px;
            }
            &.active {
                color: $color1;
            }
        }
    }
}
</style>